<template>
	<view class="container">
		<view style="margin: 16rpx 0;">
			<u-tabs :list="list" :is-scroll="false" :current="tabsCurrent" @change="tabsChange" active-color="#444">
			</u-tabs>
		</view>
		<uni-calendar :insert="true" :lunar="true" :selected="info.selected"  @change="change" :range="true" />
		<view class="popup-bottom">
			<view style="padding-top: 100rpx;" v-if="!(addPlanData.startDate||addPlanData.endDate)">
				<u-empty text="选择日期后填写" mode="list"></u-empty>
			</view>
			<block v-if="addPlanData.startDate||addPlanData.endDate">
				<view class="change-plan-limit">
					<view class="plan-option">
						<u-section title="计划名称" :arrow="false" :bold="false" :show-line="false">
							<view slot="right">
								<u-input v-model="addPlanData.planName" type="text" input-align="right" />
							</view>
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==0||tabsCurrent==1">
						<u-section title="描述计划" :bold="false" :show-line="false">
							<view slot="right">
								<u-input v-model="addPlanData.planDescription" type="text" input-align="right" />
							</view>
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==1">
						<u-section title="添加共同计划人" :bold="false" :show-line="false" :sub-title="commomPlanMan" @click="addCommomPlan">
							
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==2">
						<u-section title="设置时间" :bold="false" :show-line="false">
							<view slot="right">
								 <picker mode="time" value="12:00" start="00:00" end="24:00" @change="changeStartTime">
								    <view class="picker">
								      {{addPlanData.startTime}}
								    </view>
								  </picker>
							</view>
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==0||tabsCurrent==1">
						<u-section title="每日开始时间" :bold="false" :show-line="false">
							<view slot="right">
								 <picker mode="time" value="12:00" start="00:00" end="24:00" @change="changeStartTime">
								    <view class="picker">
								      {{addPlanData.startTime}}
								    </view>
								  </picker>
							</view>
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==0||tabsCurrent==1">
						<u-section title="每日结束时间" :bold="false" :show-line="false" sub-title="">
							<view slot="right">
								 <picker mode="time" value="12:00" start="00:00" end="24:00" @change="changeEndtTime">
								    <view class="picker">
								      {{addPlanData.endTime}}
								    </view>
								  </picker>
							</view>
						</u-section>
					</view>
					<view class="plan-option" v-show="tabsCurrent==0||tabsCurrent==1">
						<u-section title="计划标签" :bold="false" :show-line="false" sub-title="">
								<view slot="right">
									<u-input v-model="addPlanData.lable" type="text" input-align="right" />
								</view>
						</u-section>
					</view>
					<view class="plan-option">
						<u-section title="设置提醒" :bold="false" :show-line="false" sub-title="">
							<view slot="right">
								 <picker @change="remindChange" :value="remindArrIndex" :range="remindArr">
									<view class="uni-input">{{remindArr[remindArrIndex]}}</view>
								 </picker>
							</view>
						</u-section>
					</view>
					<view class="plan-option"  v-show="tabsCurrent==0||tabsCurrent==1">
						<u-section title="设置权限" :bold="false" :show-line="false">
							<view slot="right">
								 <picker @change="powerChange" :value="powerIndex" :range="powerList">
									<view class="uni-input">{{powerList[powerIndex]}}</view>
								 </picker>
							</view>
						</u-section>
					</view>
				</view>
				<view class="plan-option-change">
					<!-- <view class="plan-option-change-btn" hover-class="small-hover" @click="sendData">
						确定
					</view> -->
					<button  @click="sendData" type="default" style="margin: 0;background-color: #6D39E9;border: none;color: #fff;font-size: 30rpx;font-weight: 500;width: 400rpx;border-radius: 100rpx;"  >确定</button>
				</view>
			</block>
		
		</view>
		
		<u-popup border-radius="72"  v-model="isCommon" mode="bottom" height="908rpx">
			<view style="display: flex;justify-content: center;line-height: 100rpx;position: relative;">
				<text style="font-size: 29rpx;">提醒打卡</text>
				<view @click="clickClockFriend" style="font-size: 25rpx;color: rgba(0,0,0,0.80);font-weight: 500;position: absolute;right:58rpx;color: #6D39E9">
					完成
				</view>
			</view>
			<view style="padding: 30rpx 58rpx;">
				<u-search height="72" bg-color="#F1F3F8" placeholder="输入好友用户名" v-model="searchValue"></u-search>
				<y-seat height="43"></y-seat>
				<view class="user-list" v-for="(item,index) in friendList" :key="index">
					<view class="user">
						<u-avatar size="87" :src="item.picture"></u-avatar>
						<view style="margin-left: 15rpx;">
							{{item.name}}
						</view>
					</view>
					<view class="option">
						<u-radio-group v-model="value">
							<u-radio active-color="#6d39e9"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import {Plan} from '../../model/plan.js'
	let dayjs = require('dayjs')
	export default {
		data() {
			return {
				showCalendar: false,
				showChangePlan: false,
				list: [{
					name: '个人计划'
				}, {
					name: '共同计划'
				}, {
					name: '待办日程',
					count: 5
				}],
				powerList:['全部可见','好友可见','仅自己'],
				powerIndex:0,
				tabsCurrent: 0,
				planList:[],
				remindArr:['每隔1小时提醒','每隔2小时提醒','每隔3小时提醒','每隔4小时提醒'],
				remindArrIndex:0,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [
					]
				},
				addPlanData:{
					startDate:'',
					endDate:'',
					planName:'',
					planKind:this.tabsCurrent,
					planDescription:'',
					startTime:'8:00',
					endTime:'17:00',
					lable:'',
					hour:""
				},
				isCommon:false,
				commomPlanMan:" ",
				friendList:[
					{
						name:"宋媛媛",
						picture:"http://47.110.134.12:8080/reminder/img/QQ图片20210508235914.png"
					},{
						name:"陈智列",
						picture:"http://47.110.134.12:8080/reminder/img/QQ图片20210506104057.png"
					},
					{
						name:"Jenny",
						picture:"http://47.110.134.12:8080/reminder/img/QQ图片20210508235927.png"
					},
				]
			};
		},
		async onLoad() {
			// uni.showLoading({
			// 	title:"加载中"
			// })
		

		},
		computed: {
			...mapState(['planViewData'])
		},
		methods: {
			addCommomPlan(){
				this.isCommon=true;
			},
			clickClockFriend(){
				this.commomPlanMan="已添加"
				this.isCommon=false;
			},
			sendData(e){
				uni.showToast({
					title:"提交成功"
				})
				setTimeout(()=>{
					uni.reLaunch({
						url:"/pages/index/index"
					})
					uni.hideLoading()
				},1000)
			},
			powerChange(e){
				const value = e.detail.value;
				this.powerIndex=value;
			},
			remindChange(e){
				const value = e.detail.value;
				this.remindArrIndex=value;
				// 这里还有问题 存储的有中文
				this.$set(this.addPlanData,'hour', this.remindArr[this.remindArrIndex]);
				console.log(this.addPlanData)
			},
			changeEndtTime(e){
				const value = e.detail.value;
				this.$set(this.addPlanData,'endTime', value);
			},
			changeStartTime(e){
				const value = e.detail.value;
				this.$set(this.addPlanData,'startTime', value);
			},
			addPlanBtnClick(){
				this.showChangePlan=true;
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			},
			tabsChange(e) {
				this.tabsCurrent = e;
			},
			clickChangePlan() {
				console.log('修改计划')
			},
			change(e) {
				this.$set(this.addPlanData,'startDate', e.range.before);
				this.$set(this.addPlanData,'endDate', e.range.after);
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return;
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// });
			}
		},
		onReady() {}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
	}

	.content-limit {
		margin: 10rpx 43rpx;
	}

	.change-plan-btn {
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 30rpx;

	}
	
	.changePlanBtn {
		background-color: #fff !important;
		color: #6D39E9 !important;
		box-shadow: none !important;
		border: 2rpx solid #6d39e9 !important;
		border-radius: 53rpx;
		width: 377rpx;
		margin: 0 auto;
	}

	.clock-label-title {
		font-size: 29rpx;
		font-weight: 500;
		color: #35358d;
	}

	.clock-label-info {
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.60);
	}

	.popup-bottom {
		position: relative;
		top: -40rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 72rpx 72rpx 0rpx 0rpx;
	}


	.clock-title {
		font-size: 35rpx;
		font-weight: 500;
		text-align: LEFT;
		color: #35358d;
		margin: 7rpx 0;
	}

	.change-plan-limit {
		padding: 30rpx 42rpx;
	}
	.plan-option{
		margin: 43rpx;
	}
	.plan-option-change{
		display: flex;
		justify-content: center;
		
	}
	.plan-option-change-btn{
		width: 373rpx;
		padding: 29rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.plan-option-line{
		width: 2rpx;
		height: 80rpx;
		background: rgba(0,0,0,0.15);
	}
	.changeBtn {
		background-color: #6d39e9;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		box-shadow: 0px 2px 8px rgba(109, 57, 233, 0.54);
	}
	.user-list{
		display: flex;
		margin-bottom: 23rpx;

		.user{
			display: flex;
			align-items: center;
			flex:1
		}
		.option{
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>
